/*
 * @Author: CPS
 * @Date: 2020-08-05 00:16:54
 * @Last Modified by: CPS
 * @Last Modified time: 2020-08-30 22:55:41
 * @Projectname Electron-fileWatcher
 * @file_path D:\CPS\MyProject\Electron-fileWatcher\src\renderer\pages\fileWatcher\js\fileList\fileList.js
 * @Filename fileList.js
 * 主要管理各个被监听的文件夹生成和展示,状态
 */

'use strict'

/* css样式文件 */
import './css/fileList.stylus'

/*图片资源*/
import icon from './icon.js'

/* html模板文件 */
import testData from './testData.js'
import containerTemplate from './template/container.pug'
import contentTemplate from './template/content.pug'

/* 事件模块 */
import fileListEvents from './fileListEvents.js'

/*载入路由*/
import Router from '@api/router'

// 定义组件前缀名
function prefix(name) {
  return 'fileList__' + name
}

class createFileList {

  /**
   * [constructor description]
   * @param  {[type]}  tar  传入一个挂载位置,
   *                        html实例  当前页面回挂载到该实例,切该实例会被清空
   *                        id        同上,会将id对应的标签实例作为容器
   *                        空值      查找页面 id fileList__component 的容器,如果没有
   * @param  {Boolean} data [description]
   * @return {[type]}       [description]
   */
  constructor(tar) {
    this.event = null
    this.icon = icon
    this.el = null //整个组件的容器元素,html标签实例
    this.content = null //文件列表的容器,html实例
    this.folderObject = testData //获取目录

    /* 判断tar的类型 */
    switch (tar ? tar.toString() : '') {
      case '[object HTMLElement]':
        // 传入的是一个html实例,将其作为父元素,挂载
        if (tar.className.indexOf(prefix('component')) == -1) tar.className += ' ' + prefix('component')
        this.el = tar
        break

      case '':
        //传入了空值，尝试查找文档下是否存在 fileList__component 为id的元素
        this.el = document.getElementById(prefix('component'))
        if (this.el) break
        return

      default:
        // 传入的不是html实例,默认当作id名,尝试查找是否存在该ID
        log(tar.toString())
        this.el = document.getElementById(tar.toString());
        break
    }

    if (!this.el) return log('获取父元素失败')

    this.init(this.folderObject)

    // 创建组件成功成功,添加事件模块
    fileListEvents(this)
  }

  init(data) {
    log('执行初始化init')
    this.clean()

    //创建关联目录样式
    this.createContainer(data['folder'])

    //创建子文件样式
    for (let eachFolder in data['folders']) this.pushContent(data['folders'][eachFolder])
  }

  // 创建容器标签
  // 仅供初始化时内部调用
  // 初始化组件整体实例
  createContainer(data) {
    this.el.innerHTML = containerTemplate({
      folder: data,
      icon: this.icon
    })

    this.content = this.el.getElementsByClassName(prefix('content'))[0]
  }

  // 创建文件列表,可供外部调用
  createContent(absPath) {
    console.log('获得的path:' + absPath)

    if (!this.content) this.content = this.el.getElementsByClassName(prefix('content'))[0]
    if (!this.content) return log('无法获取子文件夹列表元素')

    // 发送读取请求
    this.folderObject = Router.post('/folder/createFolder', absPath)

    console.dir(this.folderObject)
    this.init(this.folderObject)
  }

  /* 载入单个文件夹信息 */
  pushFolder(absPath) {
    /* 获取新目录的信息 */
    let newFolder = Router.post('/folder/pushFolder', absPath)

    /* 更新内部对象 */
    this.folderObject['folders'][newFolder.dirname] = newFolder

    /*将新 标签插入*/
    this.pushContent(this.folderObject['folders'][newFolder.dirname])
  }

  // 从头部添加新目录(默认)
  pushContent(data) {
    // 创建一个容器
    let res = document.createElement('sesstion')
    res.className = res.id = prefix('eachFloder')

    if (Array.isArray(data)) { //添加多个
      //创建一个虚拟元素,最后一次性渲染dom
      let tmpDOM = document.createDocumentFragment()

      data.forEach((item) => {
        res.innerHTML += contentTemplate({
          folder: item,
          icon: this.icon
        })

        tmpDOM.appendChild(res)
      })

      this.content.appendChild(tmpDOM)
    } else {
      // 添加单个
      res.innerHTML = contentTemplate({
        folder: data,
        icon: this.icon
      })

      // 将数据挂载到对象
      this.content.insertBefore(res, this.content.firstElementChild)
      data['el'] = this.content.firstElementChild
      res = null
      return
    }
  }

  // 在尾部加入新目录
  appendContent(data) {
    this.content.innerHTML = this.content.innerHTML + contentTemplate({
      folder: data,
      icon: this.icon
    })
    return this.content.lastElementChild
  }

  clean() {
    if (this.content && this.content.innerHTML) this.content.innerHTML = ""
  }

  /*对子元素进行排序*/
  sort() {
    //对folderList进行排序
    if (!this.content) return

    //创建一个虚拟元素

    //创建一个容器
    let tmpList = []

    for (let eachElement of this.content.children) {
      let tmp = {
        el: eachElement,
        eachFloderName: eachElement.getElementsByClassName(prefix('eachFloderName'))[0].innerHTML
      }
    }

    // fw['folderList'].sort((a, b) => {
    //   let x = a.mtime //通过最后的修改时间，进行排序
    //   let y = b.mtime //通过最后的修改时间，进行排序
    //   if (x > y) return -1
    //   if (y > x) return 1
    //   return 0
    // })
  }
}

export default createFileList
